<template>
  <div class="dashboard-container">
    <el-row :gutter="20" style="margin-bottom: 5px;">
      <el-col :span="18">
        <el-row :gutter="20" style="margin-bottom: 5px;">
          <el-col :span="12">
            <el-card shadow="never" style="background: #f65f2f; color: #fff;font-size: 16px;">
              <div style="text-align: center; margin-bottom: 50px;">
                <div style="font-size: 20px;">今日交易额</div>
                <div style="font-size: 38px;padding: 15px 0;">{{(todaySales.Sales/100).toFixed()}}</div>
                <div>
                  <span>昨日： {{(yesterdaySales.Sales/100).toFixed()}}</span>
                  <span v-show="yesterdaySales.Sales === 0" style="padding-left:20px;">环比： 0%</span>
                  <span v-show="yesterdaySales.Sales !== 0" style="padding-left:20px;">环比： {{Math.round((todaySales.Sales-yesterdaySales.Sales)/yesterdaySales.Sales*100)}}%</span>
                </div>
              </div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">交易笔数</div>
                    <div style="padding: 5px 0;">{{(todaySales.DocCount).toFixed()}}</div>
                    <div v-show="yesterdaySales.DocCount === 0" style="padding: 4px 0;text-align: left;">环比：0%</div>
                    <div v-show="yesterdaySales.DocCount !== 0" style="padding: 4px 0;text-align: left;">环比：{{Math.round((todaySales.DocCount-yesterdaySales.DocCount)/yesterdaySales.DocCount*100)}}%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日：{{(yesterdaySales.DocCount).toFixed()}}</div>
                  </div>
                </el-col>
                <el-col :span="6" style="border-right: 1px solid #fff;border-left: 1px solid #fff;">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">交易量</div>
                    <div style="padding: 5px 0;">{{(todaySales.Weight/1000).toFixed()}}</div>
                    <div v-show="yesterdaySales.Weight === 0" style="padding: 4px 0;text-align: left;">环比：0%</div>
                    <div v-show="yesterdaySales.Weight !== 0" style="padding: 4px 0;text-align: left;">环比：{{Math.round((todaySales.Weight-yesterdaySales.Weight)/yesterdaySales.Weight*100)}}%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日：{{(yesterdaySales.Weight/1000).toFixed()}}</div>
                  </div>
                </el-col>
                <el-col :span="6" style="border-right: 1px solid #fff;">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">客单价</div>
                    <div style="padding: 5px 0;">{{(Math.round(todaySales.PCT)).toFixed()}}</div>
                    <div v-show="yesterdaySales.PCT === 0" style="padding: 4px 0;text-align: left;">环比： 0%</div>
                    <div v-show="yesterdaySales.PCT !== 0" style="padding: 4px 0;text-align: left;">环比： {{Math.round((todaySales.PCT-yesterdaySales.PCT)/yesterdaySales.PCT*100)}}%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日： {{(Math.round(yesterdaySales.PCT)).toFixed()}}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">会员销售</div>
                    <div style="padding: 5px 0;">0</div>
                    <div style="padding: 4px 0;text-align: left;">环比： 0%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日： 0</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" style="background: #134e66; color: #fff;font-size: 16px;">
              <div style="text-align: center; margin-bottom: 50px;">
                <div style="font-size: 20px;">今日总客流</div>
                <div style="font-size: 38px;padding: 15px 0;">{{todayPeopleNumber.all}}</div>
                <div>
                  <span>昨日： {{yestodayPeopleNumber.all}}</span>
                  <span v-show="yestodayPeopleNumber.all === 0" style="padding-left:20px;">环比： 0%</span>
                  <span v-show="yestodayPeopleNumber.all !== 0" style="padding-left:20px;">环比： {{Math.round((todayPeopleNumber.all-yestodayPeopleNumber.all)/yestodayPeopleNumber.all*100)}}%</span>
                </div>
              </div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">去重客流</div>
                    <div style="padding: 5px 0;">{{todayPeopleNumber.de}}</div>
                    <div v-show="yestodayPeopleNumber.de === 0" style="padding: 4px 0;text-align: left;">环比： 0%</div>
                    <div v-show="yestodayPeopleNumber.de !== 0" style="padding: 4px 0;text-align: left;">环比： {{Math.round((todayPeopleNumber.de-yestodayPeopleNumber.de)/yestodayPeopleNumber.de*100)}}%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日： {{yestodayPeopleNumber.de}}</div>
                  </div>
                </el-col>
                <el-col :span="6" style="border-right: 1px solid #fff;border-left: 1px solid #fff;">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">新增客流</div>
                    <div style="padding: 5px 0;">{{todayPeopleNumber.new}}</div>
                    <div v-show="yestodayPeopleNumber.new === 0" style="padding: 4px 0;text-align: left;">环比：0%</div>
                    <div v-show="yestodayPeopleNumber.new !== 0" style="padding: 4px 0;text-align: left;">环比：{{Math.round((todayPeopleNumber.new-yestodayPeopleNumber.new)/yestodayPeopleNumber.new*100)}}%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日：{{yestodayPeopleNumber.new}}</div>
                  </div>
                </el-col>
                <el-col :span="6" style="border-right: 1px solid #fff;">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">回头客流</div>
                    <div style="padding: 5px 0;">{{todayPeopleNumber.re}}</div>
                    <div v-show="yestodayPeopleNumber.re === 0" style="padding: 4px 0;text-align: left;">环比： 0%</div>
                    <div v-show="yestodayPeopleNumber.re !== 0" style="padding: 4px 0;text-align: left;">环比： {{Math.round((todayPeopleNumber.re-yestodayPeopleNumber.re)/yestodayPeopleNumber.re*100)}}%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日： {{yestodayPeopleNumber.re}}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div style="text-align: center;">
                    <div style="padding: 5px 0;">会员客流</div>
                    <div style="padding: 5px 0;">0</div>
                    <div style="padding: 4px 0;text-align: left;">环比： 0%</div>
                    <div style="padding: 4px 0;text-align: left;">昨日： 0</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="never">
              <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              分时数据
              </p>
              <div style="font-size: 14px;margin-left: 50px;">
                <p>销售高峰期为： <span style="color: #f65f2f;">{{maxValue.fenshiMaxSalesKey.split(" ")[1]}} </span> 共 <span style="color: #f65f2f;">{{maxValue.fenshiMaxSales/100}} </span> 元</p>
                <p>客流高峰期为： <span style="color: #2b82e4;">{{maxValue.fenshiMaxpeopleKey.split(" ")[1]}} </span> 共 <span style="color: #2b82e4;">{{maxValue.fenshiMaxpeople}} </span> 人</p>
                <p>到访最大客群为： <span style="color: #2b82e4;">{{maxValue.largestGroup.sexGroup}}，{{maxValue.largestGroup.ageGroup}}岁 </span></p>
              </div>
              <chart :options="options" style="height: 390px; margin: -50px -80px -50px -80px;"></chart>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div style="background: #134e66; height: 50px; margin: -20px -20px 0 -20px;"></div>
          <p style="font-size: 20px; text-align:center; color: #fff;margin-top: -35px;">{{date}}</p>
          <el-row :gutter="20">
            <el-col :span="18">
              <p style="margin: 10px 0 0 3px;padding-top: 10px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              经营数据监控
              </p>
            </el-col>
            <el-col :span="6">
              <div style="margin: 10px 0 0 3px;padding-top: 10px;font-size: 1.5em;">
                <i class="el-icon-edit" @click="edit"></i>
              </div>
            </el-col>
          </el-row>
          <div style="font-size: 14px;margin-left: 20px;">
            <p>本月剩余天数： <span style="color: #f65f2f;">{{shengyuday}}</span> 天</p>
            <p>本月销售目标： <span style="color: #f65f2f;">{{form.orderAmount}} </span> 元，已完成 <span style="color: #f65f2f;"> {{salesRate ? salesRate : 0}}% </span></p>
            <p>本月客流目标： <span style="color: #2b82e4;">{{form.personNumber}} </span> 人，已完成 <span style="color: #2b82e4;"> {{flowRate ? flowRate : 0}}%</span></p>
          </div>
          <chart :options="MARKET_MONTHLY_SALES_PER" style="height: 330px; margin: -38px -20px -35px 0px;"></chart>
          <div style="text-align: center;padding: 0 0 30px;">销售额监控</div>
          <br>
          <chart :options="MARKET_MONTHLY_FLOW_TREND" style="height: 330px; margin: -61px -20px -40px 0px;"></chart>
          <div style="text-align: center;">流量监控</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 5px;">
      <el-col :span="18">
        <el-row :gutter="20" style="margin-bottom: 5px;">
          <el-col :span="12">
            <el-card shadow="never" style="position: relative;">

              <el-row :gutter="20">
                <el-col :span="21">
                  <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
                  分类销售占比
                  </p>
                </el-col>
                <!-- <el-col :span="3"> -->
                <div style="position: absolute; right: 10px;top: 0px;">
                  <el-switch v-model="zhanbi" @change="changeZhanbi" active-color="#13ce66" inactive-color="#3398db"></el-switch>
                </div>
                <!-- </el-col> -->
              </el-row>
              <!-- 1 按金额 2 按笔数 -->
              <div style="font-size: 14px;margin-left: 20px;">
                <p v-show="zhanbi===true">销售额最多的品类为： <span style="color: #f65f2f;"> {{topTypeSales.maxSalesName}} </span> ，共 <span style="color: #f65f2f;"> {{topTypeSales.maxSales}} </span> 元，占总销售额 <span style="color: #f65f2f;"> {{topTypeSales.per}}% </span></p>
                <p v-show="zhanbi===false">销售笔数最多的品类为： <span style="color: #2b82e4;">{{topTypeCount.maxCountName}} </span> ，共 <span style="color: #2b82e4;"> {{topTypeCount.maxCount}} </span> 笔，占总销售笔数 <span style="color: #2b82e4;"> {{topTypeCount.per}}% </span></p>
              </div>
              <chart :options="MARKET_DAILY_TOPTYPE_SALSE_DATA" style="height: 400px; margin: -40px -30px -10px -10px;"></chart>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" style="position:relative;">
              <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              客群画像
              </p>
              <ul class="clearfix" style="position:absolute;top:10px;right:30px;font-size: 14px;list-style-type:none;color: #666;">
                <li style="float: left; text-align:center;">
                  <div>
                    <img style="width: 50px;" src="../../assets/ma.jpg" alt="">
                  </div>
                  <div>{{malePct}}</div>
                </li>
                <li style="float: left; text-align:center;font-size: 2em;">vs</li>
                <li style="float: left; text-align:center;">
                  <div>
                    <img style="width: 50px;" src="../../assets/fa.jpg" alt="">
                  </div>
                  <div>{{femalePct}}</div>
                </li>
              </ul>
              <chart :options="MARKET_DAILY_FACE_AGE_HOUR" style="height: 410px; margin: 13px -30px -30px -10px;"></chart>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="never">
              <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              客流漏斗
              </p>
              <chart :options="MARKET_DAILY_FLOW_FUNNEL" style="height: 330px; margin: 0 0px -30px 0px;"></chart>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="never">
              <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              到访间隔分布
              </p>
              <chart :options="MARKET_DAILY_VISIT_INTERVAL" style="height: 330px; margin: 0 -60px -30px 0px;"></chart>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="never">
              <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              入口热力图
              </p>
              <chart :options="MARKET_DAILY_HOT_REGIONAL" style="height: 330px; margin: 0 -60px -30px 0px;"></chart>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" style="position: relative;">
          <div style="background: #f65f2f; height: 50px; margin: -20px -20px 0 -20px;"></div>
          <el-row :gutter="20">
            <el-col :span="18">
              <p style="font-size: 20px; color: #fff;margin-top: -35px;">交易排行</p>
            </el-col>
            <!-- <el-col :span="6"> -->
            <div style="position: absolute; right: 10px;top: 0px;">
              <el-switch style="margin-top: -67px;" v-model="paihang" @change="changePaihang" active-color="#13ce66" inactive-color="#3398db"></el-switch>
            </div>
            <!-- </el-col> -->
          </el-row>
          <ul v-show="paihang===false" style="list-style-type:none; padding-left: 0;">
            <li class="clearfix" style="margin-bottom: 10px; padding-left: 30px;" v-for="(b,index) in businessTop10" :key="index">
              <div style="float: left; padding: 5px 30px 0 0;line-height: 50px;text-align:center;">{{index + 1}}</div>
              <div style="float: left; padding: 5px 10px 0 0;">
                <img style="height: 3em;border-radius: 50%;" src="../../assets/morentouxiang.png" alt="">
              </div>
              <!-- <div style="float: left; padding: 5px 10px 0 0;">
                <img style="height: 3em;border-radius: 50%;" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt="">
              </div> -->
              <div style="float: left; padding: 5px 15px 0;">
                <div style="color: #1e1d1d;"><span style="font-size: 16px;">{{b.Key}}</span></div>
                <div style="color: #5a5a5a;">销售笔数：<span>{{b.DocCount}}</span></div>
                <div style="padding: 5px 0;color: #5a5a5a;">销售金额：<span>{{b.Sales/100}}</span></div>
              </div>
              <!-- <div style="float: left; padding: 5px 10px 0 0;font-size: 16px;">猪肉</div> -->
            </li>
          </ul>
          <!-- 1：金额，3：交易笔数 -->
          <ul v-show="paihang===true" style="list-style-type:none; padding-left: 0;">
            <li class="clearfix" style="margin-bottom: 10px; padding-left: 30px;" v-for="(b,index) in businessTop10" :key="index">
              <div style="float: left; padding: 5px 30px 0 0;line-height: 50px;text-align:center;">{{index + 1}}</div>
              <div style="float: left; padding: 5px 10px 0 0;">
                <img style="height: 3em;border-radius: 50%;" src="../../assets/morentouxiang.png" alt="">
              </div>
              <!-- <div style="float: left; padding: 5px 10px 0 0;">
                <img style="height: 3em;border-radius: 50%;" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt="">
              </div> -->
              <div style="float: left; padding: 5px 15px 0;">
                <div style="color: #1e1d1d;"><span style="font-size: 16px;">{{b.Key}}</span></div>
                <div style="color: #5a5a5a;">销售笔数：<span>{{b.DocCount}}</span></div>
                <div style="padding: 5px 0;color: #5a5a5a;">销售金额：<span>{{b.Sales/100}}</span></div>
              </div>
              <!-- <div style="float: left; padding: 5px 10px 0 0;font-size: 16px;">猪肉</div> -->
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row :gutter="20" style="margin-bottom: 5px;">
          <el-col :span="12">
            <el-card shadow="never">
              <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              品类客单价
              </p>
              <chart :options="TOPTYPE_PTC_DATA" style="height: 350px; margin: 0px -15px -11px -10px;"></chart>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" style="position: relative;">
              <el-row :gutter="20">
                <el-col :span="18">
                  <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
                  单品成交排行
                  </p>
                </el-col>
                <!-- <el-col :span="6"> -->
                <div style="position: absolute; right: 10px;top: 0px;">
                  <el-switch v-model="danpin" @change="changeDanpin" active-color="#13ce66" inactive-color="#3398db"></el-switch>
                </div>
                <!-- </el-col> -->
              </el-row>
              <chart :options="MARKET_DAILY_HOT_SALES" style="height: 350px; margin: -10px -15px -1px -10px;"></chart>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 5px;">
          <el-col :span="24">
            <el-card shadow="never">
              <p style="margin: 10px 0 10px 3px;padding-top: -5px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
              购进信息填报情况
              </p>
              <el-row :gutter="20">
                <el-col :span="4" style="text-align:center;">
                  <el-row :gutter="15">
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #134e66;font-size: 30px;font-weight: bold;">{{modal.vegeExistPurchase}}</div>
                    </el-col>
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #f65f2f;font-size: 30px;font-weight: bold;">{{modal.vegeNotExistPurchase}}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="15">
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">已填报</div>
                    </el-col>
                    <el-col :span="1">
                      <div>/</div>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">未填报</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div style="font-size: 24px; padding-top: 13px;">蔬菜</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4"  style="text-align:center;border-right: 1px solid #999;border-left: 1px solid #999;">
                  <el-row :gutter="15">
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #134e66;font-size: 30px;font-weight: bold;">{{modal.porkExistPurchase}}</div>
                    </el-col>
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #f65f2f;font-size: 30px;font-weight: bold;">{{modal.porkNotExistPurchase}}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="15">
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">已填报</div>
                    </el-col>
                    <el-col :span="1">
                      <div>/</div>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">未填报</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div style="font-size: 24px; padding-top: 13px;">猪肉</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4"  style="text-align:center;">
                  <el-row :gutter="15">
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #134e66;font-size: 30px;font-weight: bold;">{{modal.beefExistPurchase}}</div>
                    </el-col>
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #f65f2f;font-size: 30px;font-weight: bold;">{{modal.beefNotExistPurchase}}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="15">
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">已填报</div>
                    </el-col>
                    <el-col :span="1">
                      <div>/</div>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">未填报</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div style="font-size: 24px; padding-top: 13px;">牛羊肉</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4"  style="text-align:center;border-right: 1px solid #999;border-left: 1px solid #999;">
                  <el-row :gutter="15">
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #134e66;font-size: 30px;font-weight: bold;">{{modal.chickenExistPurchase}}</div>
                    </el-col>
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #f65f2f;font-size: 30px;font-weight: bold;">{{modal.chickenNotExistPurchase}}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="15">
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">已填报</div>
                    </el-col>
                    <el-col :span="1">
                      <div>/</div>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">未填报</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div style="font-size: 24px; padding-top: 13px;">禽类</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4"  style="text-align:center;border-right: 1px solid #999;">
                  <el-row :gutter="15">
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #134e66;font-size: 30px;font-weight: bold;">{{modal.eggExistPurchase}}</div>
                    </el-col>
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #f65f2f;font-size: 30px;font-weight: bold;">{{modal.eggNotExistPurchase}}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="15">
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">已填报</div>
                    </el-col>
                    <el-col :span="1">
                      <div>/</div>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">未填报</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div style="font-size: 24px; padding-top: 13px;">蛋类</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4"  style="text-align:center;">
                  <el-row :gutter="15">
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #134e66;font-size: 30px;font-weight: bold;">{{modal.soyExistPurchase}}</div>
                    </el-col>
                    <el-col :span="12" style="padding: 15px 0;">
                      <div style="color: #f65f2f;font-size: 30px;font-weight: bold;">{{modal.soyNotExistPurchase}}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="15">
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">已填报</div>
                    </el-col>
                    <el-col :span="1">
                      <div>/</div>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding: 0 0 0 13px;">未填报</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div style="font-size: 24px; padding-top: 13px;">豆制品</div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" style="height: 624px;">
          <div style="background: #fabe32; height: 155px; margin: -20px -20px 0 -20px;"></div>
          <p style="font-size: 20px; color: #fff;margin-top: -135px;">今日检测</p>
          <el-row :gutter="20">
            <el-col :span="8" style="color: #fff;">
              <div style="text-align: center;">
                <div style="font-size: 36px;padding: 0px 0 15px;">{{checksInfo.businessTotal}}</div>
                <div style="font-size: 16px;">摊位数</div>
              </div>
            </el-col>
            <el-col :span="8" style="color: #fff;">
              <div style="text-align: center;">
                <div style="font-size: 36px;padding: 0px 0 15px;">{{checksInfo.totalCheck}}</div>
                <div style="font-size: 16px;">检测批次</div>
              </div>
            </el-col>
            <el-col :span="8" style="color: #fff;">
              <div style="text-align: center;">
                <div style="font-size: 36px;padding: 0px 0 15px;">{{Math.round((checksInfo.totalCheck - checksInfo.isQualifiedNumber)/checksInfo.totalCheck*100)}}%</div>
                <div style="font-size: 16px;">合格率</div>
              </div>
            </el-col>
          </el-row>
          <div style="margin-top: 20px;">
            <el-table :data="checkReportData">
              <el-table-column prop="businessName" label="商户"></el-table-column>
              <el-table-column prop="sampleName" label="产品"></el-table-column>
              <el-table-column prop="testResults" label="检测值"></el-table-column>
              <el-table-column prop="isQualifiedName" label="检测结论"></el-table-column>
            </el-table>
            <el-pagination
              :page-size="checkReportPage.perPage"
              :current-page="checkReportPage.page"
              :total="checkReportPage.total"
              @current-change="changeCheckReport"
              style="padding-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="editDialog" @close="close" style="width: 50%;">
      <div>
        <el-form :model="form" label-width="150px">
          <el-form-item label="本月销售目标：" prop="orderAmount" label-width="120px">
            <el-input v-model="form.orderAmount" style="width: 300px;">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="本月客流目标：" prop="personNumber" label-width="120px">
            <el-input v-model="form.personNumber" style="width: 300px;">
              <template slot="append">人</template>
            </el-input>
          </el-form-item>
          <div v-show="flag">
            <el-form-item label="marketTargetId：" prop="marketTargetId" label-width="120px">
              <el-input v-model="form.marketTargetId"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">设定目标</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Chart from '@/components/Charts'
import { saleAmount, formatDate5,formatDate2,formatDate, trend } from '@/utils'
import Cookies from 'js-cookie'
import store from '@/store'

export default {
  name: 'home',
  components: {
    Chart
  },
  data(){
    return {

      // 客群画像(人数)
      maleNumber: 0, //	int	男
      malePct: 0, // 男占比
      femaleNumber: 0, //	int	女
      femalePct: 0, // 女占比


      title: `制定 ${formatDate5(new Date())[1]} 目标`,
      // 小图标编辑
      editDialog: false,
      flag: false,
      form: {
        personNumber: 0, //	int	人流数
        orderAmount: 0, //	int	销售目标（分）
        marketTargetId: 0
      },

      danpin: true, // 单品成交排行
      paihang: true, // 交易排行
      zhanbi: true, // 分类销售占比

      date: formatDate5(new Date())[0],
      // 检测信息
      checkReportData: [],
      yesterdaydate: '',
      checkReportPage: {
        perPage: 7, // 每页显示10条
        page: 1, // 当前页
        total: 0
      },
      topTypeSales:{
        maxSalesName: '',
        maxSales: '',
        per: ''
      },
      topTypeCount:{
        maxCountName: '',
        maxCount: '',
        per: ''
      },
      todayPeopleNumber:{
        all: 0,
        de: 0,
        re: 0,
        hre:0,
        new:0
      },
      yestodayPeopleNumber:{
        all: 0,
        de: 0,
        re: 0,
        hre:0
      },
      todaySales:{
        Sales:0,
        DocCount:0,
        Weight:0,
        PCT:0
      },
      yesterdaySales:{
        Sales:0,
        DocCount:0,
        Weight:0,
        PCT:0
      },
      businessTop10:[],
      salesRate:0,
      flowRate:0,
      // 购进信息
      modal: {
        porkExistPurchase: 0,  //猪肉已填报数量
        porkNotExistPurchase: 0,  //猪肉未填报数量
        beefExistPurchase: 0,  //牛羊肉已填报数量
        beefNotExistPurchase: 0,  //牛羊肉未填报数量
        soyExistPurchase: 0,  //豆制品已填报数量
        soyNotExistPurchase: 0,  //豆制品未填报数量
        chickenExistPurchase: 0,  //禽类已填报数量
        chickenNotExistPurchase: 0,  //禽类未填报数量
        eggExistPurchase: 0,  //蛋类已填报数量
        eggNotExistPurchase: 0,  //蛋类未填报数量
        vegeExistPurchase: 0, //	int	蔬菜已填报数量
        vegeNotExistPurchase: 0 //	int	蔬菜未填报数量
      },
      checksInfo:{
        businessTotal:0,
        isQualifiedNumber:0,
        totalCheck: 0
      },
      maxValue:{
        fenshiMaxSales: 0,
        fenshiMaxSalesKey: '',
        fenshiMaxpeople: 0,
        fenshiMaxpeopleKey: '',
        largestGroup: {
          ageGroup: '',
          sexGroup: ''
        }
      },
      shengyuday: 0
    }
  },
   watch: {
    '$store.state.app.marketId'(val, oldVal){
      const marketId = store.state.app.marketId

      // 获取今年 年 月 日
      const myDate = new Date()
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const day = myDate.getDate()

      // 获取今年 昨日
      const time = (new Date).getTime()-24*60*60*1000
      const yesterday = new Date(time)
      const yesterdayMonth = yesterday.getMonth() + 1
      const yesterdayDay = yesterday.getDate()

      const date = year + '-' + month

      const today = new Date()
      const startDate = formatDate(new Date(today.getFullYear(), today.getMonth(), 1, 0,0,0))
      const endDate = formatDate(new Date(today.getFullYear(), today.getMonth()+1, 0, 23,59,59))
      // 客群画像(人数)
      this.getkequnhuaxiangsex(startDate, endDate, date, 'month')
      this.$store.dispatch('home/fetchTargetInfo', {marketId, date}).then(
        data => {
          // this.form = data
          this.form.orderAmount = data.orderAmount / 100
          this.form.personNumber = data.personNumber
          this.fetchMarketMonthlySales(marketId, year, month, data.orderAmount*100)
          this.fetchMarketMontlyFlowTrend(marketId, year, month, data.personNumber)
        }
      ).catch( err => {
      })

      // // 分时数据
      // this.$store.dispatch('home/fetchChartListNew', {year, month, day, marketId}).then(
      //     data => {
      //     }
      //   ).catch( err => {
      //     console.log('views-home-index.js-dispatch', err)
      //   })

      // 分时数据

      const targetDate = formatDate2(new Date())
      this.$store.dispatch('home/fetchChartListNew', {targetDate}).then(
        data => {
          this.maxValue = data
          console.log('分时数据vuethis.maxValue',data)
        }
      ).catch( err => {
        console.log('views-home-index.js-dispatch', err)
      })

      // 检测信息
      this.getCheckReportData(yesterday,this.checkReportPage.perPage,this.checkReportPage.page)
      this.fetchMarketDailyCheckInfo(yesterday)

      this.fetchMarketDailyTopType(marketId, year, month, day, 1)
      this.fetchMarketDailyHostSales(marketId, year, month, day, 1)
      this.fetchHotRegionalData(marketId, year, month, day)
      this.fetchMarketDailyVisitInterval(marketId, year, month, day)
      this.fetchMarketDailyFlowFunnel(marketId, year, month, day)
      this.fetchMarketDailyFaceAgeHour(marketId, year, month)
      this.fetchMarketDailySales(marketId, year, yesterdayMonth, month, day, yesterdayDay)
      // this.yesterdayMonth(marketId, year, month, yesterdayMonth, day, yesterdayDay)
      this.fetchMarketDailyBusinessTop10(marketId, year, month, day, 1)
      this.getPurchaseCountInfo(myDate)

    }
  },
  computed: {
    // 分时数据
    ...mapState('home',['options', 'MARKET_DAILY_TOPTYPE_SALSE_DATA', 'TOPTYPE_PTC_DATA', 'MARKET_DAILY_HOT_SALES',
    'MARKET_DAILY_HOT_REGIONAL','MARKET_DAILY_VISIT_INTERVAL', 'MARKET_DAILY_FLOW_FUNNEL', 'MARKET_MONTHLY_SALES_PER',
    'MARKET_MONTHLY_FLOW_TREND', 'MARKET_DAILY_FACE_AGE_HOUR','RAT'])
  },
  mounted(){
    // this.date = formatDate5(new Date())[0]

    const marketId = store.state.app.marketId

    // 获取今年 年 月 日
    const myDate = new Date()
    const year = myDate.getFullYear()
    const month = myDate.getMonth() + 1
    const day = myDate.getDate()

    // 获取今年 昨日
    const time = (new Date).getTime()-24*60*60*1000
    const yesterday = new Date(time)
    const yesterdayMonth = yesterday.getMonth() + 1
    const yesterdayDay = yesterday.getDate()

    const date = year + '-' + month

    this.yesterdaydate = yesterday


    const today = new Date()
    const startDate = formatDate(new Date(today.getFullYear(), today.getMonth(), 1, 0,0,0))
    const endDate = formatDate(new Date(today.getFullYear(), today.getMonth()+1, 0, 23,59,59))
    // 客群画像(人数)
    this.getkequnhuaxiangsex(startDate, endDate, date, 'month')

    this.$store.dispatch('home/fetchTargetInfo', {marketId, date}).then(
      data => {
        // this.form = data
        this.form.orderAmount = data.orderAmount / 100
        this.form.personNumber = data.personNumber
        this.fetchMarketMonthlySales(marketId, year, month, data.orderAmount*100)
        this.fetchMarketMontlyFlowTrend(marketId, year, month, data.personNumber)
      }
    ).catch( err => {
    })

    // 分时数据
    const targetDate = formatDate2(new Date())
    this.$store.dispatch('home/fetchChartListNew', {targetDate}).then(
        data => {
          this.maxValue = data
          console.log('分时数据vuethis.maxValue',data)
        }
      ).catch( err => {
        console.log('views-home-index.js-dispatch', err)
      })

    // 检测信息
    this.getCheckReportData(yesterday, this.checkReportPage.perPage,this.checkReportPage.page)
    this.fetchMarketDailyCheckInfo(yesterday)

    this.fetchMarketDailyTopType(marketId, year, month, day, 1)
    this.fetchMarketDailyHostSales(marketId, year, month, day, 1)
    this.fetchHotRegionalData(marketId, year, month, day)
    this.fetchMarketDailyVisitInterval(marketId, year, month, day)
    this.fetchMarketDailyFlowFunnel(marketId, year, month, day)
    this.fetchMarketDailyFaceAgeHour(marketId, year, month)
    this.fetchMarketDailySales(marketId, year, yesterdayMonth, month, day, yesterdayDay)
    this.fetchMarketDailyBusinessTop10(marketId, year, month, day, 1)
    this.getPurchaseCountInfo(myDate)
    this.getshengyuday()
  },
  methods: {

    // 客群画像(人数)
    getkequnhuaxiangsex(startDate, endDate, date, type){
      this.$store.dispatch('businessReport/fetchkequnhuaxiangsex', {startDate, endDate, date, type}).then(
        data => {
          this.maleNumber = data.maleNumber //	int	男
          this.femaleNumber = data.femaleNumber //	int	女
          this.malePct = ((data.maleNumber / data.totalNumber) * 100).toFixed() + '%' // 男占比
          this.femalePct = ((data.femaleNumber / data.totalNumber) * 100).toFixed() + '%' // 女占比
        }
      )
    },
    // 编辑小目标
    edit(){
      this.editDialog = true
      const marketId = store.state.app.marketId
      const myDate = new Date()
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const date = year + '-' + month
      this.$store.dispatch('home/fetchTargetInfo', {marketId, date}).then(
        data => {
          this.form.orderAmount = data.orderAmount / 100
          this.form.personNumber = data.personNumber
        }
      ).catch( err => {
      })

    },
    close(){
      this.editDialog = false
    },
    // 提交商户信息
    save(){
      this.editDialog = false
      const marketId = store.state.app.marketId
      const myDate = new Date()
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const date = year + '-' + month
      this.getTargetSave(marketId, date, this.form.marketTargetId,this.form.personNumber,this.form.orderAmount*100)
      this.fetchMarketMonthlySales(marketId, year, month, this.form.orderAmount*100)
      this.fetchMarketMontlyFlowTrend(marketId, year, month, this.form.personNumber)
    },
    getTargetSave(marketId, date, marketTargetId,personNumber,orderAmount){
      this.$store.dispatch('home/fetchTargetSave', {marketId, date, marketTargetId,personNumber,orderAmount}).then(
        data => {
          this.$message({
            type: 'success',
            message: '设定成功!'
          })
        }
      ).catch(err=>{
        this.$message({
          type: 'error',
          message: '设定失败!'
        })
      })
    },
    // 分类销售占比
    changeZhanbi(status){
      const marketId = store.state.app.marketId
      const myDate = new Date()
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const day = myDate.getDate()
      if(status === false){
        this.zhanbi = false
        this.fetchMarketDailyTopType(marketId, year, month, day, 2)
      }else if(status === true){
        this.zhanbi = true
        this.fetchMarketDailyTopType(marketId, year, month, day, 1)
      }
    },
    // 切换单品成交排行 true 右 金额
    changeDanpin(status){
      const marketId = store.state.app.marketId
      const myDate = new Date()
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const day = myDate.getDate()
      if(status === false){
        this.danpin = false
        this.fetchMarketDailyHostSales(marketId, year, month, day, 2)
      }else if(status === true){
        this.danpin = true
        this.fetchMarketDailyHostSales(marketId, year, month, day, 1)
      }
    },
    // 切换交易排行
    changePaihang(status){
      const marketId = store.state.app.marketId
      const myDate = new Date()
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const day = myDate.getDate()
      if(status === false){
        this.paihang = false
        this.fetchMarketDailyBusinessTop10(marketId, year, month, day, 1)
      }else if(status === true){
        this.paihang = true
        this.fetchMarketDailyBusinessTop10(marketId, year, month, day, 3)
      }
    },
    // 本月剩余几天
    getshengyuday(){
      let today = new Date()
      let now = today.getDate()
      let year = today.getYear()
      if (year < 2000) year += 1900
      let month = today.getMonth()
      let monarr = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
      if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monarr[1] = "29"
      this.shengyuday = monarr[month] - now
    },
    // 检测信息
    getCheckReportData(date,perPage,page){
      this.$store.dispatch('home/fetchCheckReportData',{date,perPage,page}).then(
        data => {
          this.checkReportData = data.items
          this.checkReportPage.total = data.total

          var stalls = []
          var goodCount = 0
          for(var i =0; i<this.checkReportData.length; i++){
            if(this.checkReportData[i].isQualifiedName == "合格"){
              goodCount += 1
            }
            stalls[i] = this.checkReportData[i].businessName
          }

          this.checksInfo.count = this.checkReportData.length
          this.checksInfo.goodRate = (goodCount / this.checksInfo.count) * 100
        }
      ).catch(err => {
        this.checkReportData = []
        this.checkReportPage.total = 0
      })
    },
    changeCheckReport(num){
      this.checkReportPage.page = num
      this.getCheckReportData(this.yesterdaydate,this.checkReportPage.perPage,num)
    },
    fetchMarketDailyTopType(marketId, year, month, day, sort){
      this.$store.dispatch('home/fetchMarketDailyTopType', {marketId, year, month, day, sort}).then(
        data => {
          this.topTypeSales = data[0]
          this.topTypeCount = data[1]
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketDailyTopType', err)
      })
    },
    fetchMarketDailyHostSales(marketId, year, month, day, sort){
      this.$store.dispatch('home/fetchMarketDailyHostSales', {marketId, year, month, day, sort}).then(
        data => {
          console.log(data)
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketDailyHostSales', err)
      })
    },
    fetchHotRegionalData(marketId, year, month, day) {
      this.$store.dispatch('home/fetchHotRegionalData', {marketId, year, month, day}).then(
        data => {
          console.log('fetchHotRegionalData', data)
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchHotRegionalData', err)
      })
    },
    fetchMarketDailyVisitInterval(marketId, year, month, day) {
      this.$store.dispatch('home/fetchMarketDailyVisitInterval', {marketId, year, month, day}).then(
        data => {
          console.log('fetchMarketDailyVisitInterval', data)
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketDailyVisitInterval', err)
      })
    },
    fetchMarketDailyFlowFunnel(marketId, year, month, day) {
      this.$store.dispatch('home/fetchMarketDailyFlowFunnel', {marketId, year, month, day}).then(
        data => {
          console.log('12324', data)
          this.todayPeopleNumber.all = data[0][0].cnt
          this.todayPeopleNumber.de = data[0][1].cnt
          this.todayPeopleNumber.re = data[0][2].cnt
          this.todayPeopleNumber.hre = data[0][3].cnt
          this.todayPeopleNumber.new = data[0][4].cnt
          this.yestodayPeopleNumber.all = data[1][0].cnt
          this.yestodayPeopleNumber.de = data[1][1].cnt
          this.yestodayPeopleNumber.re = data[1][2].cnt
          this.yestodayPeopleNumber.hre = data[1][3].cnt
          this.yestodayPeopleNumber.new = data[1][4].cnt
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketDailyFlowFunnel', err)
      })
    },
    fetchMarketMonthlySales(marketId, year, month,orderAmount) {
      console.log("orderAmount", orderAmount)
      this.$store.dispatch('home/fetchMarketMonthlySales', {marketId, year, month, orderAmount}).then(
        data => {
          console.log('data157456000000000000000')
          console.log(data)
          this.salesRate = data
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketMonthlySales', err)
      })
    },
    fetchMarketDailySales(marketId, year, yesterdayMonth, month, day, yesterdayDay){
      this.$store.dispatch('home/fetchMarketDailySales', {marketId, year, yesterdayMonth, month, day, yesterdayDay}).then(
        data => {
          this.todaySales = data[0]
          this.yesterdaySales =data[1]
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketDailySales', err)
      })
    },
    fetchMarketDailyBusinessTop10(marketId, year, month, day, sort) {
      this.$store.dispatch('home/fetchMarketDailyBusinessTop10', {marketId, year, month, day, sort}).then(
        data => {
          this.businessTop10 = data
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketDailyBusinessTop10', err)
      })
    },
    fetchMarketDailyCheckInfo(date){
      this.$store.dispatch('home/fetchMarketDailyCheckInfo',{date}).then(
        data => {
          this.checksInfo = data
        }
      ).catch(err => {})
    },
    // 购进信息
    getPurchaseCountInfo(date){
      this.$store.dispatch('purchaseInfo/fetchPurchaseCountInfo',{date}).then(
        data => {
          console.log(data)

          this.modal.porkExistPurchase = data.data.porkExistPurchase
          this.modal.porkNotExistPurchase = data.data.porkNotExistPurchase
          this.modal.beefExistPurchase = data.data.beefExistPurchase
          this.modal.beefNotExistPurchase = data.data.beefNotExistPurchase
          this.modal.soyExistPurchase = data.data.soyExistPurchase
          this.modal.soyNotExistPurchase = data.data.soyNotExistPurchase
          this.modal.chickenExistPurchase = data.data.chickenExistPurchase
          this.modal.chickenNotExistPurchase = data.data.chickenNotExistPurchase
          this.modal.eggExistPurchase = data.data.eggExistPurchase
          this.modal.eggNotExistPurchase = data.data.eggNotExistPurchase
          this.modal.vegeExistPurchase = data.data.vegeExistPurchase
          this.modal.vegeNotExistPurchase = data.data.vegeNotExistPurchase

        }
      ).catch(err => {})
    },
    getMarketPeopleNumber(type,checkList,startTime,endTime){
      this.$store.dispatch('peopleNumber/fetchPeopleNumberLineCharts', {type,checkList,startTime,endTime})
    },
    fetchMarketMontlyFlowTrend(marketId, year, month, personNumber) {
      this.$store.dispatch('home/fetchMarketMontlyFlowTrend', {marketId, year, month, personNumber}).then(
        data => {
          this.flowRate = data
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketMontlyFlowTrend', err)
      })
    },
    fetchMarketDailyFaceAgeHour(marketId, year, month) {
      this.$store.dispatch('home/fetchMarketDailyFaceAgeHour', {marketId, year, month}).then(
        data => {
        }
      ).catch( err => {
        console.log('views-home-index.js-fetchMarketDailyFaceAgeHour', err)
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    font-size: 14px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .number{
    font-size: 28px;
    margin: 15px 0 13px;
    color: #333;
    font-weight: bolder;
    .money{
      font-size: 16px;
      font-weight: normal;
    }
  }
}
.el-card{
  border-radius: 8px;
}
/deep/.el-card__body{
  padding: 20px;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0 auto;
}
</style>
